<template>
  <scroll-view class="time-line-wrap">
    <view class="time-line">
      <!-- 时间轴 -->
      <view class="time-line-container" :class="addTypeClass">
        <!-- 时间轴内容块列表 -->
        <view class="time-line-list">
          <!-- 时间轴内容块 -->
          <view
            class="time-line-info"
            :key="index"
            :class="[layoutClass(index)]"
            :id="'timeline' + index"
            v-for="(item, index) of allPosts"
          >
            <!-- 内容块内容 -->
            <view class="line-info-content">
              <!-- 时间轴圆点 -->
              <view
                class="line-on-round"
                :style="{
                  opacity: current[index] && current[index].is == 'ok' ? 1 : 0,
                  top: '12rpx',
                  borderColor: item.nodeColor || themeColor,
                }"
                :class="
                  current[index] && current[index].is == 'ok' ? comeani : ''
                "
              ></view>

              <view
                class="info-content-wrap"
                :style="{
                  opacity: current[index] && current[index].is == 'ok' ? 1 : 0,
                }"
                :class="
                  current[index] && current[index].is == 'ok' ? comeani : ''
                "
              >
                <!-- 标题 -->
                <view
                  class="info-title"
                  :style="{
                    color: item.timeColor || themeColor,
                  }"
                >
                  {{ item.date }}
                </view>
                <view v-for="(post,postIndex) in item.posts">
                  <view
                    style="
                      margin-top: 40rpx;
                      padding: 30rpx;
                      background-color: #FFFFFF;
                      border-radius: 20rpx;
                    "
                  >
                    <view class="bmjg">{{ post.content }}</view>
                    <view class="info-content" v-if="post.pictures && post.pictures.length==1">
                      <view class="jg_bg">
                        <image mode="aspectFill" :src="post.pictures[0]" @click="ViewImage(post.pictures,post.pictures[0])"></image>
                      </view>
                    </view>
					<view class="info-content" v-if="post.pictures && post.pictures.length>1">
					  <view class="jg_bgs" style="width: 570rpx;display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap;">
						  <view :style="{'margin-bottom': pictureIndex/3 == 0 ? '' : '14rpx;' }" style="width: 180rpx;height: 180rpx;border-radius: 10rpx;overflow: hidden;" v-for="(picture,pictureIndex) in post.pictures">
							  <image mode="aspectFill" :src="picture" @click="ViewImage(post.pictures,picture)"></image>
						  </view>
					  </view>
					</view>
                    <view
                      style="
                        width: 570rpx;
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-end;
                        margin-top: 20rpx;
                        font-size: 28rpx;
                        color: #bababa;
                      "
                    >
                      {{post.gmtCreate}} 于{{ post.location }}</view
                    >
                  </view>
                  <view style="width: 100%;display: flex;flex-direction: row;justify-content: flex-end;">
                    <view class="footer-item">
                      <view class="footer-button" @click="createPost(post.id)">
                        <uni-icons type="chatboxes" size="25" :color="themeColor" ></uni-icons>
                      </view>
                    </view>
                    <view class="footer-item" v-if="post.isLike">
                    	<view class="footer-button" @click="likeOrCancelPost(post.id,index,postIndex)">
                    		<uni-icons type="heart" size="22" :color="themeColor"></uni-icons>
                    	</view>
                    	<view style="font-size: 28rpx;margin-left: 10rpx;" :style="{'color':themeColor}">{{post.likeCount}}</view>
                    </view>
                    <view class="footer-item" v-else>
                    	<view class="footer-button" @click="likeOrCancelPost(post.id,index,postIndex)">
                    		<uni-icons type="heart" size="22" color="#9a9a9a"></uni-icons>
                    	</view>
                    	<view style="font-size: 28rpx;color: #9a9a9a;margin-left: 10rpx;" >{{post.likeCount}}</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      allPosts: [],
      HEIGHT: 0, //屏幕高度
      result: [], //监听的结果
      current: [], //当前在屏幕内的
      comeani: 'come-ani', //入场动画
    }
  },
  watch: {
    isFench(val) {
      if (val == 1) {
        console.log('添加标志位')
        for (let i = 0; i < this.fenchData.length; i++) {
          this.current.push({
            tag: 'timeline' + (this.allPosts.length + i),
            is: 'no',
          })
        }
        this.allPosts = [...this.allPosts, ...this.fenchData]
        setTimeout(() => {
          this.getScroll()
        })
      }
    },
  },
  props: {
    location: {
      type: String,
      default: 'center',
    },
    title: {
      type: String,
      default: '时间轴',
    },
    isFench: {
      type: Number,
      default: 0,
    },
    fenchData: {
      type: Array,
      default: [],
    },
    themeColor: {
      type: String,
      default: '#E18427',
    },
  },
  computed: {
    addTypeClass() {
      let _class = ''
      let arrType = ['left', 'right', 'center']
      if (arrType.indexOf(this.location) !== -1 && this.location !== 'center') {
        _class += this.location + '-time-line'
      }
      return _class
    },
	
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      try {
        // 获取屏幕高度
        const res = uni.getSystemInfoSync()
        this.HEIGHT = res.screenHeight
      } catch (e) {
        // error
      }
    },
    loadani() {
      for (let i = 0; i < this.result.length; i++) {
        for (let j = 0; j < this.result[i].info.length; j++) {
          // 是否没加载动画
          if (this.current[j].is != 'ok') {
            // 是否进入视野
            if (
              this.current[j].tag == this.result[i].info[j].tag &&
              this.result[i].info[j].domTop + 90 < this.HEIGHT
            ) {
              console.log('进入视野')
              // 加载动画
              this.current[j].is = 'ok'
            }
          }
        }
        // 移除当前
        this.result.splice(i, 1)
      }
    },
    async getScroll() {
      let info = []
      // 返回位置信息加入数组
      for (let i = 0; i < this.allPosts.length; i++) {
        await this.getNodeList('timeline' + i).then((res) => {
          info.push(res)
        })
      }
      this.result.push({
        info: info,
      })
      // 加载动画
      this.loadani()
    },
    getNodeList(id) { 
      // 获取位置信息并返回
      return new Promise((resolve) => {
        const query = uni.createSelectorQuery().in(this)
        query
          .select('#' + id)
          .boundingClientRect((data) => {
            // console.log("得到布局位置信息" + JSON.stringify(data));
            // console.log("节点离页面顶部的距离为" + data.top);
            resolve({
              domInfo: data.height,
              domTop: data.top,
              tag: id,
            })
          })
          .exec()
      })
    },
    // 添加动画
    layoutClass(index) {
      let _class = ''
      if (this.location == 'center' && index % 2 != 0) {
        _class = 'right-info'
      }
      return _class
    },
	likeOrCancelPost(id,dateIndex,postIndex) {
		this.$api.likeOrCancelPost({
			id
		}).then(res => {
			if (this.allPosts[dateIndex].posts[postIndex].isLike) {
				this.allPosts[dateIndex].posts[postIndex].likeCount--
				this.allPosts[dateIndex].posts[postIndex].isLike = false
			} else {
				this.allPosts[dateIndex].posts[postIndex].likeCount++
				this.allPosts[dateIndex].posts[postIndex].isLike = true
			}
		})
	},
	
	ViewImage(pictures, url) {
		uni.previewImage({
			urls: pictures,
			current: url
		});
	},
  },
}
</script>

<style lang="scss">
//
.bmjg {
  width: 580rpx;
}

.bmjg > text {
  color: #e18326;
}

.jg_bg {
  width: 570rpx;
  height: 350rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.jg_name {
  font-size: 28rpx;
  color: #323232;
  font-weight: bold;
}

.jg_num {
  font-size: 36rpx;
  color: #e18326;
  font-weight: bold;
}

.jg_pftxt {
  font-size: 20rpx;
  color: #757575;
  text-align: center;
  margin-top: 10rpx;
}

.jg_pf_ico {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}

.jg_pf_ico > image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 4rpx;
}

.rzbm {
  font-size: 20rpx;
  color: #e18326;
}

.kc_bg {
  height: 180rpx;
  border-top: 2rpx solid #eaeaea;
  display: flex;
  align-items: center;
}

.kc_logo {
  width: 174rpx;
  height: 116rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.kc_name {
  font-size: 28rpx;
  color: #323232;
  font-weight: bold;
}

.kc_time {
  font-size: 20rpx;
  color: #323232;
  margin: 14rpx 0;
}

.jiaoyu {
  font-size: 20rpx;
  color: #757575;
}

//
.time-line-wrap {
  width: 100%;
  overflow-x: hidden;
}

.time-line-wrap {
  font-family: sans-serif;

  .time-line {
    padding: 4% 2%;

    .time-line-title {
      font-size: 25rpx;
      font-weight: 800;
      text-align: center;
      margin-bottom: 15rpx;
    }

    // 中间的轴
    .time-line-container {
      padding: 3% 3rpx;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        height: 100%;
        width: 4rpx;
        background: #f0f0f0;
      }

      .time-line-list {
        width: 100%;

        .time-line-info {
          position: relative;

          .line-info-content {
            will-change: auto;
            width: 43%;
            display: flex;
            flex-direction: column;

            .line-on-round {
              height: 30rpx;
              width: 30rpx;
              border: 4rpx solid #e18427;
              border-radius: 50%;
              background: #fff;
              position: absolute;
              left: 0;
              right: 0;
              margin: 0 auto;
              top: 50rpx;
              box-shadow: 0rpx 2rpx 1rpx 1rpx rgba(0, 0, 0, 0.1);
              z-index: 10;

              &.come-ani {
                animation: come-round 0.8s ease-in-out;
              }
            }

            .info-content-wrap {
              position: relative;

              .info-title {
                min-height: 30rpx;
                word-break: break-word;
                text-align: right;
                margin: 5rpx 0;
                font-size: 34rrpx;
                font-weight: 500;
                color: #e18427;
                font-weight: bold;
              }

              .info-content {
                border-radius: 8rpx;
                position: relative;
                margin-top: 20rpx;

                .info-txt {
                }

                // &::before{
                //     content: '';
                //     border: 7rpx solid;
                //     border-color: transparent transparent transparent #aaa;
                //     position: absolute;
                //     left: 100%;
                //     top: 18rpx;
                // }
              }

              .footer-item {
                margin-top: 20rpx;
                margin-left: 40rpx;
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                align-items: center;

                .text {
                  font-size: 46rpx;
                  font-weight: bold;
                }

                .footer-button {
                  padding: 0 15rpx;
                  height: 60rpx;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  background-color: #FFFFFF;
				  box-shadow: 0 0 2rpx 4rpx #f4f4f4;
                  border-radius: 50rpx;
                  color: white;
                }
              }

              &.come-ani {
                animation: come-in-left 0.6s ease-in-out;
              }
            }
          }
        }

        .right-info {
          transform: rotateY(180deg);

          .line-info-content {
            .info-content-wrap {
              .info-title {
                transform: rotateY(180deg);
                text-align: left;
              }

              .info-content {
                .info-txt {
                  transform: rotateY(180deg);
                }
              }
            }
          }
        }
      }
    }

    // 轴在左边
    .left-time-line {
      &::before {
        margin: 0;
        left: 15rpx;
      }

      .time-line-list {
        .time-line-info {
          .line-info-content {
            width: auto;

            .line-on-round {
              left: -4rpx;
              margin: 0;
            }

            .info-content-wrap {
              margin-left: 45rpx;
              margin-bottom: 15rpx;

              .info-title {
                text-align: left;
              }

              .info-content {
                &::before {
                  border-color: transparent #aaa transparent transparent;
                  left: -15rpx;
                }
              }

              &.come-ani {
                animation: come-in-right 0.6s ease-in-out;
              }
            }
          }
        }
      }
    }

    // 轴在右边
    .right-time-line {
      &::before {
        margin: 0;
        left: 92.8%;
      }

      .time-line-list {
        .time-line-info {
          .line-info-content {
            width: auto;

            .line-on-round {
              left: 90%;
              margin: 0;
            }

            .info-content-wrap {
              margin-right: 55rpx;
              margin-bottom: 15rpx;

              .info-content {
                &::before {
                  border-color: transparent transparent transparent #aaa;
                }
              }
            }
          }
        }
      }
    }
  }
}

image {
  width: 100%;
  height: 100%;
}

@keyframes come-in-left {
  0% {
    transform: translateX(-120%);
  }

  70% {
    transform: translateX(8%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes come-in-right {
  0% {
    transform: translateX(120%);
  }

  70% {
    transform: translateX(-8%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes come-round {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  60% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}
</style>
